<template>
  <div class="container">
    <div class="app-container">
      <div class="left">
        <el-input
          style="margin-bottom: 10px"
          type="text"
          prefix-icon="el-icon-search"
          size="small"
          v-model.trim="queryParmas.keyword"
          placeholder="输入员工姓名全员搜索"
          @input="handleSearch"
        />
        <!-- 树形组件 -->
        <el-tree
          ref="tree"
          :data="departmentList"
          :props="defaultProps"
          :highlight-current="true"
          :default-expand-all="true"
          :expand-on-click-node="false"
          node-key="id"
          @current-change="handleNodeClick"
        ></el-tree>
      </div>
      <div class="right">
        <el-row class="opeate-tools" type="flex" justify="end">
          <el-button size="mini" type="primary" @click="addRole" v-permission="'add-per'"
            >添加员工</el-button
          >
          <el-button size="mini" @click="handleSuccess">excel导入</el-button>
          <el-button size="mini" @click="exportUser">excel导出</el-button>
        </el-row>
        <!-- 表格组件 -->
        <el-table style="margin: 10px 0px" :data="userList">
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="头像">
            <template v-slot="{ row }">
              <img
                :src="row.staffPhoto"
                alt=""
                style="width: 30px"
                v-if="row.staffPhoto"
              />
              <span v-else class="username">{{ row.username?.charAt(0) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="username"></el-table-column>
          <el-table-column
            label="手机号"
            sortable
            prop="mobile"
          ></el-table-column>
          <el-table-column
            label="工号"
            sortable
            prop="workNumber"
          ></el-table-column>
          <el-table-column label="聘用形式" prop="formOfEmployment">
            <template v-slot="{ row }">
              <span>{{ row.formOfEmployment == 1 ? "正式" : "非正式" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName"></el-table-column>
          <el-table-column
            label="入职时间"
            sortable
            prop="timeOfEntry"
          ></el-table-column>
          <el-table-column label="操作" width="240px">
            <template v-slot="{ row }">
              <el-button type="text" @click="showEmployee(row)">查看</el-button>
              <el-button type="text" @click="setRole(row)">角色</el-button>
              <el-popconfirm
                :title="`你确定要删除${row.username}吗?`"
                style="margin-left: 10px"
                @onConfirm="deleteEmployee(row.id)"
              >
                <el-button type="text" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 
           
      
       
        
        -->

        <el-pagination
          layout="prev, pager, next,sizes,total"
          :total="total"
          style="text-align: center"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="this.queryParmas.pagesize"
          :current-page="this.queryParmas.page"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>
    <ExportExcel
      :showExcelDialog.sync="showExcelDialog"
      @getData="getDepartmentList"
    ></ExportExcel>
    <el-dialog title="分配角色" :visible.sync="showDialog">
      <el-checkbox-group v-model="roleIds">
        <el-checkbox :label="item.id" v-for="item in roleList" :key="item.id">{{ item.name }}</el-checkbox>
      </el-checkbox-group>
      
     <div style="text-align: center; margin-top: 30px;">
      <el-button type="primary" size="mini" @click="handleAddRole">确定</el-button>
      <el-button type="danger" size="mini" @click="showDialog=false">取消</el-button>
     </div>
    </el-dialog>
  </div>
</template>

<script>
//引入插件
import FileServer from "file-saver";
//引入接口
import { getDepartmentList } from "@/api/department";
import { getUserList, exportUser, deleteUser,getUserDetail } from "@/api/user";
import {getRoleList,assignAuth} from '@/api/role'
//引入组件
import ExportExcel from "@/views/employee/components/ExportExcel";
//引入工具函数
import { listToTree } from "@/utils";
export default {
  name: "Employee",
  data() {
    return {
      //树形组件数据
      departmentList: [],
      //树形组件的规定
      defaultProps: {
        children: "children",
        label: "name",
      },
      //存储接口携带的参数
      queryParmas: {
        departmentId: "",
        page: 1,
        pagesize: 10,
        //模糊字体查询
        keyword: "",
      },
      //总页数
      total: 0,
      //员工列表
      userList: [],
      //控制组件的显示与隐藏
      showExcelDialog: false,
      //控制对话框显示与隐藏
      showDialog: false,
      //存储角色列表
      roleList: [],
      //存储角色id
      roleIds:[],
      //存储角色id
      roleId:''
    };
  },
  mounted() {
    this.getDepartmentList();
  },
  methods: {
    //获取组织列表
    async getDepartmentList() {
      this.departmentList = listToTree(await getDepartmentList(), 0);
      //获取首个节点
      this.queryParmas.departmentId = this.departmentList[0].id;
      //调用tree组件方法
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(this.queryParmas.departmentId);
      });
      this.getUserList();
    },
    //获取员工列表
    async getUserList() {
      let reslut = await getUserList(
        this.queryParmas.page,
        this.queryParmas.pagesize,
        this.queryParmas.departmentId,
        this.queryParmas.keyword
      );
      //存储数据
      this.total = reslut.total;
      this.userList = reslut.rows;
    },
    //当前节点发生变化的回调
    handleNodeClick(node) {
      //存储数据
      this.queryParmas.departmentId = node.id;
      //设置当前页数为1
      this.queryParmas.page = 1;
      //发送请求
      this.getUserList();
    },
    //当前页数发生改变的回调
    handleCurrentChange(page) {
      this.queryParmas.page = page;
      this.getUserList();
    },
    //每页展示多少条数据的回调
    handleSizeChange(pageSzie) {
      this.queryParmas.pagesize = pageSzie;
      this.getUserList();
    },
    //用户输入框搜索事件
    handleSearch() {
      //清除上一次的定时器
      clearTimeout(this.timer);
      //防抖函数
      this.timer = setTimeout(() => {
        this.queryParmas.page = 1;
        this.getUserList();
      }, 400);
    },
    //导出员工信息
    async exportUser() {
      let reslut = await exportUser();
      //调用插件下载文件
      FileServer.saveAs(reslut, "员工信息表.xlsx");
    },
    //excel导入的回调
    handleSuccess() {
      this.showExcelDialog = true;
    },
    //删除按钮的回调
    async deleteEmployee(id) {
      console.log(id);
      //调用接口
      await deleteUser(id);
      //提示
      this.$message({
        type: "success",
        message: "删除成功",
      });
      //判断当前数据
      if (this.userList.length == 1 && this.queryParmas.page != 1) {
        this.queryParmas.page -= 1;
      }
      //获取数据
      this.getUserList();
    },
    //添加员工的回调
    addRole() {
      //路由跳转
      this.$router.push({
        path: "/employee/detail",
      });
    },
    //查看按钮的回调
    showEmployee(row) {
      //携带参数路由跳转
      this.$router.push({
        path: "/employee/detail",
        query: {
          id: row.id,
        },
      });
    },
    //分配角色的回调
    async setRole(row) {
      this.roleId = row.id
      //获取员工信息
      let reslut = await getUserDetail(this.roleId);
      this.roleIds = reslut.roleIds;
      //获取数据
      this.roleList = await getRoleList()
        //显示对话框
        this.showDialog = true;
    },
    async handleAddRole() {
      const data = {
        id: this.roleId,
        roleIds: this.roleIds,
      }
      await assignAuth(data)
      //提示
      this.$message({
        type: "success",
        message: "分配成功",
      })
      //关闭对话框
      this.showDialog = false;
    }
  },
  components: {
    ExportExcel,
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background: #fff;
  display: flex;
  .left {
    width: 280px;
    padding: 20px;
    border-right: 1px solid #eaeef4;
  }
  .right {
    flex: 1;
    padding: 20px;
    .opeate-tools {
      margin: 10px;
    }
    .username {
      height: 30px;
      width: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      background: #04c9be;
      font-size: 12px;
      display: inline-block;
    }
  }
}
</style>
